<template>
    <div id="app">
        <!-- 搜索框 -->
        <div class="search_box">
            <div class="search_item">
                <div class="search_item_box">
                    <p>请输入商品名称</p>
                </div>
                <div class="search_item_text">
                    搜索
                </div>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="content_box">
            <!-- 侧边栏 -->
            <div class="nav_box">
                <ul @click="green(index)" v-for="(item,index) in arr" :key="index">
                    <li>{{item.listName}}</li>
                </ul>
            </div>
            <!-- 内容 -->
            <div class="commodity_box">
                <div v-for="(items,indexs) in arr[index].data" :key="indexs" class="commodity_box_item">
                    <div class="img">
                        <img :src="items.url" alt="">
                    </div>
                    <p>{{items.goodsName}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from "vue"


export default({
    data(){
        return{
            arr:[],  //用于存出商品数据,
            index:0,//商品数据下标
        }
    },
    created(){
        Vue.axios({
            url:"https://www.fastmock.site/mock/b2c81de082ac72c233c1d93227538a8c/category/category/api",
            methods:"GET"
        }).then(res=>{
            this.arr = res.data;
            console.log(this.arr)
        })
        
    },
    methods:{
        green:function(i){
            // 获取li节点
            var liEl = document.getElementsByTagName('li');
            //默认无样式
            for(var j=0;j<liEl.length;j++){
                liEl[j].style.borderLeft = 'none'
            }
            //变为绿色3px左边框
            liEl[i].style.borderLeft = '3px solid #11B57C'
            this.index = i;
        }
    }

})
</script>

<style scoped>
    .search_box{
        width: 93.444%;
        padding: .2rem .32rem;
        border-bottom: 1px solid rgba(0,0,0,.1);
    }
    .search_item{
        width: 355px;
        height: 25.6px;
        display: flex;
        justify-content: space-between;
    }
    .search_item_box{
        width: 86%;
        height: 100%;
        background: #f4f4f4;
        display: flex;
        align-items: center;
        color: #757575;
        border-radius: 1rem;
    }
    .search_item_text{
        width: 10%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13.4px;
        color: #11B57C;
    }
    .content_box{
        width: 100%;
        height: 600px;
    }
    .nav_box{
        width: 83px;
        height: 100%;
        background: #f4f4f4;
        float: left;
    }
    .nav_box :nth-of-type(1) li{
        border-left: 3px solid #11B57C;
    }
    .nav_box li{
        width: 100%;
        text-align: center;
        padding: 20px 0;
        font-size: 13px;
        color: #333;
    }
    .commodity_box{
        max-width: 78%;
        height: 20%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .commodity_box_item{
        width: 33%;
        display: flex;
        color: #808080;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        margin-top: .4rem;
    }
    .img{
        width: 57px;
        height: 57px;
    }
    .commodity_box_item img{
        width: 57px;
        height: 57px;
    }
    .commodity_box_item p{
        width: 57px;
        text-align: center;
    }
</style>